import './login.css';
import React, { useState ,useContext,useEffect} from 'react';
import axios from 'axios';
import {useNavigate} from 'react-router-dom';
import { WsContext } from './WsContent';
export default function Login(){
    const[id,setId]=useState('');
    const[password,setPassword]=useState('');
    const navigate=useNavigate();

    const ws=useContext('ws://localhost:8000/ws');
    
  
    function vertify(){   
    if (id=== null || id === "") {
      alert("用户名不能为空！");
      return;
    }
    if (password === null || password === "") {
      alert("密码不能为空！");
      return;
    }
    axios({
      method: 'POST',
      url: 'http://localhost:8080/login/1',
      data: {
          userId: id,
          password:password
      }
  }).then(res => {
    if (res.data.resultCode === 200) {
      sessionStorage.setItem('userId',id);
      alert('登录成功');
      navigate('/home');
    } else {
      alert('登录失败');
    }
  } ,error => {
    console.log('错误', error.message)
})
  
}

    
  
    return (<div className="container">
    <div className="login-wrapper">
      <div className="header">Login</div>
      <div className="form-wrapper">
        <input type="text" id="id" placeholder="username" className="input-item" onChange={(e) => setId(e.target.value)}/>
        <input type="password" id="password" placeholder="password" className="input-item" onChange={(e) => setPassword(e.target.value)}/>
        <button id="loginvertify" type="submit" onClick={vertify}>login</button>
      </div>
      <div className="msg">
        Don't have account?
        <a href="#">Sign up</a>
      </div>
    </div>
  </div>);
}
